<!DOCTYPE html>
<html>
<head>
	<title>按钮</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<button type="button" data-loading-text="Loading for 3 senconds" class="btn btn-primary js-loading-btn">Loading State</button>
		<!-- 点击两次转换不同的状态 -->
		<button type="button" class="btn btn-default" data-toggle="button" autocomplete="off">Hello</button>
		<!-- 多选按钮 -->
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-primary active">
				<input type="checkbox" autocomplete="off" checked>选择1
			</label>
			<label class="btn btn-primary active">
				<input type="checkbox" autocomplete="off">选择2
			</label>
			<label class="btn btn-primary active">
				<input type="checkbox" autocomplete="off">选择3
			</label>
		</div>

		<!-- 单选按钮 -->
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-primary active">
				<input type="radio" name="options" autocomplete="off" checked>单选1
			</label>
			<label class="btn btn-primary active">
				<input type="radio" name="options" autocomplete="off">单选2
			</label>
			<label class="btn btn-primary active">
				<input type="radio" name="options" autocomplete="off">单选3
			</label>
			<label class="btn btn-primary active">
				<input type="radio" name="options" autocomplete="off">单选4
			</label>
		</div>

		<!-- data-complete-text完成之后进行text文本的更改 -->
		<button type="button" data-complete-text="finish" class="btn btn-default mybtn" autocomplete="off">Hello</button>
		
	</div>

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	$('.js-loading-btn').on('click',function(e){
		// 点击后展示的内容为loading
		var btn = $(this).button('loading');
		setTimeout(function(e){
			// 重置按钮状态，将按钮上的文本还原回原始的内容
			btn.button('reset');
		},3000)
	})

	// 点击hello会变成finish
	$('.mybtn').on('click',function(e){
		$(this).button('complete');
	})
</script>
</body>
</html>